<?php
header("content-type:text/html;charset=utf-8");
include "../../public/config/config.php";
include "../../public/include/funcs.php";
$link = conn($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd,$cfg_dbname,$cfg_dbchar);
$arr_base = select($link, 'diy_dsq');
echo "<hr><hr><hr>";
foreach($arr_base as $v){
	echo $v['id']."、".$v['name']."；";
}
echo "<hr>";

$sql = "insert into diy_dsq1 (pid) values (null)";
for($i=1;$i<=20;$i++){
	// mysqli_query($link,$sql);
}

//查询，修改版
function select2($link, $tableName){
	$sql = "select * from $tableName";
	$re = mysqli_query($link,$sql);
	$arr = [];
	while($row=mysqli_fetch_assoc($re)){
		$arr[$row['id']]['id'] = $row['id'];
		$arr[$row['id']]['pid'] = $row['pid'];
		$arr[$row['id']]['name'] = $row['name'];
		$arr[$row['id']]['value'] = $row['id'];
		$arr[$row['id']]['collapsed'] = $row['collapsed'];
	}
	return $arr;
}

$arr_com = select2($link, 'diy_dsq1');

function get_tree($arr){
	foreach($arr as $v){
		$arr[$v['pid']]['children'][]= &$arr[$v['id']];
	}
	// return $arr[0]['children'][0];
	return $arr[0];
}

$arr_tree = get_tree($arr_com);
$arr_tree['name'] = '戴森球';

$json = json_encode($arr_tree);
// var_dump($json);

//看看白方块需要哪些基础材料
$arr_need = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
//查询，修改版3
function get_b20($link){
	$sql = "select * from diy_dsq where id<=20";
	$re = mysqli_query($link,$sql);
	$arr = [];
	while($row=mysqli_fetch_assoc($re)){
		$arr[$row['id']] = $row['name'];
	}
	return $arr;
}
$arr_b20 = get_b20($link);
$arr_test = [['name' => "铁矿"], ['name' => "铁矿"], ['name' => "铁矿"], ['name' => "煤矿"], ['name' => "石墨"]];
foreach($arr_com as $v){
	$search = array_search($v['name'], $arr_b20);
	if($search){
		$arr_need[$search]++;
	}
}
$total = 0;
foreach($arr_need as $k=>$v){
	$total += $v;
}


echo "<pre>";
// print_r($arr_com);
// print_r($arr_tree);
// print_r($arr_b20);
// print_r($arr_need);
echo "</pre>";

?>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>戴森球 -- <?php echo $cfg_indexname;?></title>
	
	<!-- Bootstrap -->
	<link href="/public/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="/public/css/main.css"/>
	<script src="../../eqs/echarts/cjj/echarts.js"></script>
	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	<![endif]-->
</head>
<style>
#a>a{margin-right: 8px;}
</style>
<body>
<div class="container">
	<h3>白方块（宇宙矩阵）合成图</h3>
	<p>点击小红圈可以收起或展开节点；</p>
	<p>按住鼠标可以拖动；</p>
	<p>滑动鼠标滚轮可以放大或缩小。</p>
	<div id="a"></div>
	<hr>
	<p>合成一个白方块总共需要以下基本材料：</p>
	<p>
<?php
foreach($arr_b20 as $k=>$v){
	echo "$k 、$v : $arr_need[$k] 个";
	echo "<br>";
}
echo "共计：$total 个。";
?>
	</p>
</div>
<hr>

<div id="main" style="width: 100%;padding: 0;margin: 0;height: 600%;"></div>

</body>
<script>
let str_json = '<?php echo $json;?>';
let data = JSON.parse(str_json);
// console.log(data2);
// console.log(data);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
	tooltip: {
		trigger: 'item',
		triggerOn: 'mousemove'
	},

	series: [{
		type: 'tree',
		id: '3',
		data: [data],

		top: '1%',
		left: '7%',
		bottom: '1%',
		right: '20%',
		roam: true,
		symbolSize: 7,
		initialTreeDepth: -1,

		label: {
			position: 'left',
			verticalAlign: 'middle',
			align: 'right'
		},

		leaves: {
			label: {
				position: 'right',
				verticalAlign: 'middle',
				align: 'left'
			}
		},

		//expandAndCollapse: true,
		animationDuration: 550,
		animationDurationUpdate: 750
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="/public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/public/js/footer.js"></script>
<script src="link.js"></script>
</html>